<template>
  <layout title="form表单">
    <tn-form ref="formRef" :model="formData" :rules="formRules" label-width="160" label-align="center" :border-bottom="false" :error-type="['message', 'border']">
      <tn-form-item label="姓名" prop="username" required>
        <tn-input v-model="formData.username" placeholder="请输入姓名" border focus></tn-input>
      </tn-form-item>
      <tn-form-item label="联系方式" prop="mobile" required>
        <template v-slot:label>
          <view class="tn-flex-center">
            <view>联系方式</view>
            <view><tn-icon icon="phone-fill"></tn-icon></view>
          </view>
        </template>
        <tn-input v-model="formData.mobile" type="number" placeholder="请输入手机号码" border></tn-input>
      </tn-form-item>
      <tn-form-item label="验证码" prop="code" required>
        <view class="tn-flex-center tn-col-12">
          <view class="tn-flex-1">
            <tn-input v-model="formData.code" placeholder="请输入验证码" border :maxlength="4"></tn-input>
          </view>
          <view class="tn-margin-left-sm">
            <tn-button>获取验证码</tn-button>
          </view>
        </view>
      </tn-form-item>
      <tn-form-item label="密码" prop="password" required>
        <tn-input v-model="formData.password" type="password" placeholder="请输入密码" border></tn-input>
      </tn-form-item>
      <tn-form-item label="确认密码" prop="rePassword" required>
        <tn-input v-model="formData.rePassword" type="password" placeholder="请再次输入密码" border></tn-input>
      </tn-form-item>
      <tn-form-item label="年龄" prop="age">
        <tn-input v-model="formData.age" type="number" placeholder="请输入年龄" border></tn-input>
      </tn-form-item>
      <tn-form-item label="身份证" prop="idNo">
        <tn-input v-model="formData.idNo" type="idcard" placeholder="请输入身份证号码" border></tn-input>
      </tn-form-item>
      <tn-form-item label="电子邮箱" prop="email">
        <tn-input v-model="formData.email" placeholder="请输入电子邮箱" border></tn-input>
      </tn-form-item>
      <tn-form-item label="微信号" prop="wxCode">
        <tn-input v-model="formData.wxCode" placeholder="请输入微信号" border></tn-input>
      </tn-form-item>
    </tn-form>

    <view class="tn-col-12 tn-flex-center tn-margin-top-sm">
      <tn-checkbox v-model="formData.agree" size="sm">阅读并同意<text class="tn-color-blue">《Tuniao UI相关条款》</text></tn-checkbox>
    </view>
    <view class="tn-col-12 tn-flex-center tn-margin-top">
      <tn-button size="lg" width="100%" @click="submit">提交表单</tn-button>
    </view>
  </layout>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>
  <doc-fab @click="handleDocFabClick"/>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { docContent } from './lib/doc'
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'

import TnForm from '@/tuniao-ui/components/tn-form/src/Form.vue'
import TnFormItem from '@/tuniao-ui/components/tn-form/src/FormItem.vue'
import TnInput from '@/tuniao-ui/components/tn-input/src/Input.vue'
import TnCheckbox from '@/tuniao-ui/components/tn-checkbox/src/Checkbox.vue'
import TnButton from '@/tuniao-ui/components/tn-button/src/Button.vue'
import TnIcon from '@/tuniao-ui/components/tn-icon/src/Icon.vue'
import { FormRules } from '@/tuniao-ui/types'
import { RuleItem, ValidateError } from '@/tuniao-ui/utils/async-validate'
import { mobile as validMobile, toast } from '@/tuniao-ui/utils'

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}

type FormData = {
  username: string,
  mobile: string,
  code: string,
  password: string,
  rePassword: string,
  age: string,
  idNo: string,
  email: string,
  wxCode: string,
  agree: boolean
}
let formData = reactive<FormData>({
  username: '',
  mobile: '',
  code: '',
  password: '',
  rePassword: '',
  age: '',
  idNo: '',
  email: '',
  wxCode: '',
  agree: false
})

const validateMobile: RuleItem['validator'] = (rule, value: string, callback) => {
  if (value === '') {
    return callback(new Error('联系方式不能为空'))
  }
  if (!validMobile(value)) {
    return callback(new Error('联系方式格式错误'))
  }
  callback()
}
const validateRePassword: RuleItem['validator'] = (rule, value: string, callback) => {
  if (value === '') {
    return callback(new Error('请输入密码'))
  }
  if (value !== formData.password) {
    return callback(new Error('两次密码输入不一致'))
  }
  callback()
}
let formRules = reactive<FormRules>({
  username: [
    { required: true, message: '姓名不能为空', trigger: 'blur' },
    { min: 3, max: 5, message: '姓名长度在3到5位之间', trigger: 'change'}
  ],
  mobile: [
    { required: true, message: '联系方式不能为空', trigger: 'blur' },
    { validator: validateMobile, trigger: 'change' }
  ],
  code: [
    { required: true, message: '验证码不能为空', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在6到20位之间', trigger: 'change'}
  ],
  rePassword: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在6到20位之间', trigger: 'change'},
    { validator: validateRePassword, trigger: 'change'}
  ]
})

let formRef = ref<InstanceType<typeof TnForm>>()
const submit = () => {
  formRef.value?.validate((isValid: boolean, invalidFields) => {
    if (!isValid) {
      if (invalidFields) {
        const errorMessage: string = invalidFields[Object.keys(invalidFields)[0]][0].message || '';
        toast({
          icon: 'none',
          title: errorMessage
        })
      }
    }
    
    
  })
}
</script>

<style lang="scss" scoped>
</style>
